<template>
  <div class="diseaseObservation">
    <el-radio-group v-model="compFlag" :fill="styleVars.mainColor">
      <el-radio-button
        v-for="item in compFlagConf"
        :key="item.value"
        :label="item.value"
      >
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <el-radio-group
      v-model="compFlag"
      class="ml-20"
      :fill="styleVars.mainColor"
    >
      <el-radio-button label="historyTable" style="width: 100px">
        历史护理记录
      </el-radio-button>
    </el-radio-group>
    <el-radio-group
      v-model="compFlag"
      class="ml-20"
      :fill="styleVars.mainColor"
    >
      <el-radio-button class="mediumBtn" label="templateSel">
        模板
      </el-radio-button>
    </el-radio-group>
    <div class="contentWrap">
      <div class="contentChosen">
        <patientInfo
          v-if="compFlag === 'patientInfo'"
          ref="patientInfoRef"
          :filter-date="filterDate"
        />
        <vitalSigns
          v-else-if="compFlag === 'vitalSigns'"
          ref="vitalSignsRef"
          :filter-date="filterDate"
        />
        <breath
          v-else-if="compFlag === 'breath'"
          ref="breathRef"
          :filter-date="filterDate"
        />
        <other
          v-else-if="compFlag === 'other'"
          ref="otherRef"
          :filter-date="filterDate"
        />
        <inspection
          v-else-if="compFlag === 'inspection'"
          ref="inspectionRef"
          :filter-date="filterDate"
          @current="insert"
        />
        <report
          v-else-if="compFlag === 'report'"
          ref="reportRef"
          :filter-date="filterDate"
        />
        <drugInfo
          v-else-if="compFlag === 'drugInfo'"
          ref="drugInfoRef"
          :filter-date="filterDate"
          @current="insert"
        />
        <evaluation
          v-else-if="compFlag === 'evaluation'"
          ref="evaluationRef"
          :filter-date="filterDate"
          :type="type"
          @current="insert"
        />
        <nursingOperation
          v-else-if="compFlag === 'nursingOperation'"
          ref="nursingOperationRef"
          :filter-date="filterDate"
        />
        <pipelineManage
          v-else-if="compFlag === 'pipelineManage'"
          ref="pipelineManageRef"
          :filter-date="filterDate"
        />
        <templateSel
          v-else-if="compFlag === 'templateSel'"
          ref="templateSelRef"
          :filter-date="filterDate"
          :type="type"
        />
        <historyTable
          v-else
          ref="historyTableRef"
          :filter-date="filterDate"
          :type="type"
        />
      </div>
      <el-button
        class="insertBtn"
        type="primary"
        icon="el-icon-d-arrow-right"
        @click="insert('')"
      ></el-button>
      <el-input
        v-model="careContent"
        resize="none"
        placeholder="请输入记录内容"
        class="contentEdit"
        type="textarea"
        :rows="18"
        :autosize="false"
      />
    </div>
  </div>
</template>

<script>
import { pick } from 'lodash-unified'
import { defineComponent, reactive, toRefs, watch } from 'vue'

import { addOrEditTemplate } from '@/api/nursing/nursingRecord'
import { getElementFnFromInstance } from '@/utils/instance'
import breath from '@/views/homeNew/nursingRecords/components/breath.vue' // 呼吸
import drugInfo from '@/views/homeNew/nursingRecords/components/drugInfo.vue' // 用药信息
import evaluation from '@/views/homeNew/nursingRecords/components/evaluation.vue' // 评估评分
import historyTable from '@/views/homeNew/nursingRecords/components/historyTable.vue' // 护理记录
import inspection from '@/views/homeNew/nursingRecords/components/inspection.vue' // 检验数据
import nursingOperation from '@/views/homeNew/nursingRecords/components/nursingOperation.vue' // 护理操作
import other from '@/views/homeNew/nursingRecords/components/other.vue' // 其他
import patientInfo from '@/views/homeNew/nursingRecords/components/patientInfo.vue' // 病人信息
import pipelineManage from '@/views/homeNew/nursingRecords/components/pipelineManage.vue' // 管道管理
import report from '@/views/homeNew/nursingRecords/components/report.vue' // 检查报告
import templateSel from '@/views/homeNew/nursingRecords/components/templateSel.vue' // 模板
import vitalSigns from '@/views/homeNew/nursingRecords/components/vitalSigns.vue' // 生命体征

import styleVars from './styleVars'

export default defineComponent({
  name: 'DiseaseObservation',
  components: {
    breath,
    drugInfo,
    evaluation,
    historyTable,
    inspection,
    nursingOperation,
    other,
    patientInfo,
    pipelineManage,
    report,
    templateSel,
    vitalSigns
  },
  props: {
    recordData: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const state = reactive({
      /**
       * 类型
       * - 1 护理记录
       * - 2 病程记录
       */
      type: 1,
      filterDate: new Date(),
      compFlag: 'patientInfo',
      compFlagConf: [
        { value: 'patientInfo', label: '病人信息' },
        { value: 'vitalSigns', label: '生命体征' },
        { value: 'breath', label: '呼吸' },
        { value: 'other', label: '其他' },
        { value: 'inspection', label: '检验数据' },
        { value: 'report', label: '检查报告' },
        { value: 'drugInfo', label: '用药信息' },
        { value: 'evaluation', label: '评估评分' },
        { value: 'nursingOperation', label: '护理操作' },
        { value: 'pipelineManage', label: '管道管理' }
      ],
      patientInfoRef: undefined,
      vitalSignsRef: undefined,
      breathRef: undefined,
      otherRef: undefined,
      inspectionRef: undefined,
      reportRef: undefined,
      drugInfoRef: undefined,
      evaluationRef: undefined,
      nursingOperationRef: undefined,
      pipelineManageRef: undefined,
      historyTableRef: undefined,
      templateSelRef: undefined,
      id: '',
      careContent: ''
    })

    const { $notify, $prompt } = getElementFnFromInstance()

    /**
     * 插入方法，供父组件调用
     */
    function insert(e) {
      const content = e ? e : state[state.compFlag + 'Ref'].returnContent(),
        arr = state.careContent.split(`\n`)
      if (!content) {
        return
      }
      // The newly inserted content occupies a single line
      if (state.careContent != '' && arr[arr.length - 1] != '') {
        state.careContent = state.careContent + `\n`
      }
      state.careContent = state.careContent + content
    }

    /**
     * 保存模板方法，供父组件调用
     */
    function saveAsTemp() {
      if (state.careContent == '') {
        return $notify({
          title: `新增记录为空`,
          type: 'error',
          message: '',
          duration: 2000
        })
      }
      $prompt('请输入模板名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '请输入模板名称'
      })
        .then(({ value }) => {
          const para = {
            templateContent: state.careContent,
            templateName: value,
            type: state.type
          }
          addOrEditTemplate(para).then(res => {
            if (res.data) {
              $notify({
                title: '保存成功',
                type: 'success',
                message: '',
                duration: 2000
              })
              if (state.templateSelRef.queryTemplates) {
                state.templateSelRef.queryTemplates()
              }
            }
          })
        })
        .catch(() => {
          console.info('取消保存')
        })
    }

    /**
     * 保存方法，供父组件调用
     */
    function save() {
      return state.id
        ? pick(state, ['id', 'careContent', 'type'])
        : pick(state, ['careContent', 'type'])
    }

    /**
     * 处理记录数据
     */
    function handleRecordData(data) {
      // 病情观察与措施数据
      const hljlData = data.find(v => v.dictValue === 'yx-hljl')

      if (hljlData) {
        state.id = hljlData.id
        state.careContent = hljlData['hljl-careContent'] || ''
      }
    }

    watch(
      () => props.recordData,
      val => {
        handleRecordData(val)
      },
      {
        deep: true,
        immediate: true
      }
    )

    return {
      ...toRefs(state),
      styleVars,
      insert,
      saveAsTemp,
      save
    }
  }
})
</script>

<style lang="scss" scoped>
.diseaseObservation {
  height: 416px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #aaa;
  }

  &::-webkit-scrollbar-track {
    border-radius: 8px;
  }

  .contentWrap {
    display: flex;
    margin-top: 14px;
  }

  .contentChosen {
    // flex: 1;
    width: 50%;
  }

  .insertBtn {
    height: 38px;
    align-self: center;
    margin: 0 10px;
  }

  .contentEdit {
    // flex: 1;
    width: 50%;

    textarea {
      background-color: #f9f9f9;
    }
  }
}
</style>
